<template>
  <view class="layout news">
    <scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
      <view class="cu-item" :class="index == current ? 'text-blue cur' : ''" v-for="(item, index) in categorys" :key="index" @tap="tabSelect" :data-id="index">
        {{ item.name }}
      </view>
    </scroll-view>
    <view class="cu-card article no-card">
      <navigator :url="'/pages/news/detail?id=' + item.id" class="cu-item shadow" v-for="(item, index) in lists" :key="index">
        <view class="title"><view class="text-cut" v-text="item.title"></view></view>
        <view class="content">
          <image :src="item.face" mode="aspectFill"></image>
          <view class="desc">
            <view class="text-content" v-text="item.description"></view>
            <view class="text-gray text-sm flex justify-between">
              {{ item.time | dateFormat("MM-DD")}}
              <view class="text-gray text-sm">
                <text class="cuIcon-attentionfill margin-lr-xs"></text>
                {{ item.hits }}
                <text class="cuIcon-messagefill margin-lr-xs"></text>
                {{ item.comment }}
              </view>
            </view>
          </view>
        </view>
      </navigator>
     </view>
  </view>
</template>
<script>
let page = 1,
  size = 10;
export default {
  data() {
    return {
      current: 0,
      scrollLeft: 0,
      categorys: [],
      lists: [],
      total: 0
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    tabSelect(e) {
      this.current = e.currentTarget.dataset.id;
      this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
      page = 1;
      this.lists = [];
      this.total = 0;
      this.init();
    },
    init() {
      page = 1;
      return this.$api.news
        .categorys()
        .then(response => {
          this.categorys = response.data.data;
          return response.data.data;
        })
        .then(categorys => {
          return this.$api.news.lists(categorys[this.current].id, page, size).then(_ => {
            this.lists = [...this.lists, ..._.data.data.list];
            return _.data.data.list;
          });
        });
    }
  },
  onPullDownRefresh() {
    this.init().then(_ => {
      uni.stopPullDownRefresh();
    });
  }
};
</script>
<style lang="scss" scoped>
.cu-card.article > .cu-item {
  margin: 8upx;
}
</style>
